<template>
  <div class="mc-container">
    <div>
      <el-button :icon="Plus" plain type="primary" @click="toAdd">
        添加
      </el-button>
      <el-button :icon="Delete" plain type="warning" @click="toDelete">
        删除
      </el-button>
      <el-button :icon="Edit" plain type="primary" @click="toUpdate">
        修改
      </el-button>
      <el-button :icon="SuccessFilled" plain type="primary" @click="toSave">
        保存
      </el-button>
    </div>
    <div style="height: 20px"></div>
    <el-row>
      <el-col :span="4">
        <div class="custom-tree-node-container">
          <el-tree
            :data="state.dataSource"
            :highlight-current="true"
            node-key="pkInvcl"
            :props="{ children: 'downs', label: 'invclName' }"
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <el-col :span="14">
        <el-form
          ref="formRef"
          :disabled="state.disabled"
          label-width="120px"
          :model="form"
          :rules="rules"
        >
          <el-form-item label="分类编码" prop="invclCode">
            <el-input v-model="form.invclCode" />
          </el-form-item>
          <el-form-item label="分类名称" prop="invclName">
            <el-input v-model="form.invclName" />
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4" />
    </el-row>
  </div>
</template>

<script setup>
  import {
    getAllInvclApi,
    addBaseInvclApi,
    updateBaseInvclApi,
    removeBaseInvclApi,
  } from '@/api/base/invcl'
  import { Plus, Delete, Edit, SuccessFilled } from '@element-plus/icons-vue'
  import { localStorageConfig } from '@/config/localstorage.config'
  const $baseMessage = inject('$baseMessage')
  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const formRef = ref(null)
  const rules = reactive({
    invclCode: [{ required: true, trigger: 'blur', message: '请输入分类编码' }],
    invclName: [{ required: true, trigger: 'blur', message: '请输入分类名称' }],
  })

  const state = reactive({
    dataSource: [],
    curNode: {},
    disabled: true,
  })

  const form = reactive({ invclCode: '', invclName: '' })

  const handleNodeClick = async (treeData) => {
    form.invclCode = treeData.invclCode
    form.invclName = treeData.name
    state.curNode = treeData
    state.disabled = true
  }

  const getData = async () => {
    const { code, data } = await getAllInvclApi({ pkCorp: pkCorp })
    if (code === 2000) {
      state.dataSource = data
    }
  }

  const toAdd = () => {
    form.invclCode = ''
    form.invclName = ''
    form.parentPkInvcl =
      state.curNode.pkInvcl === undefined ? '' : state.curNode.pkInvcl
    form.pkCorp = pkCorp
    state.disabled = false
  }

  const toUpdate = () => {
    if (state.curNode.pkInvcl) {
      form.pkInvcl = state.curNode.pkInvcl
      state.disabled = false
    } else {
      $baseMessage('请选择需要修改的分类', 'warning')
    }
  }

  const toSave = async () => {
    formRef.value.validate(async (valid) => {
      if (valid) {
        let res = null
        if (form.pkInvcl) {
          res = await updateBaseInvclApi(form)
        } else {
          res = await addBaseInvclApi(form)
        }
        console.log(res.code)
        if (res && res.code === 2000) {
          $baseMessage('操作成功！', 'success')
          getData()
        }
      }
    })
  }

  const toDelete = async () => {
    if (state.curNode.pkInvcl) {
      ElMessageBox.confirm('确定要删除该存货分类吗?', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const res = await removeBaseInvclApi({
            pkInvcl: state.curNode.pkInvcl,
          })
          if (res && String(res.code) === '2000') {
            $baseMessage(res && res.msg ? res.msg : '操作成功', 'success')
            getData()
          } else {
            $baseMessage(res && res.msg ? res.msg : '操作失败,请重试', 'error')
          }
        })
        .catch(() => {})
    } else {
      $baseMessage('请选择需要删除的分类', 'warning')
    }
  }

  onMounted(async () => await getData())
</script>

<style scope>
  .is-penultimate > .el-tree-node__content {
    color: #626aef;
  }

  .el-tree-node.is-expanded.is-penultimate > .el-tree-node__children {
    display: flex;
    flex-direction: row;
  }
  .is-penultimate > .el-tree-node__children > div {
    width: 25%;
  }
</style>
